<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1.0">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
      <title>学习网站</title>
      <style>
            .container {
                  display: -webkit-flex;
                  display: flex;
                  flex-direction: row;
                  justify-content: flex-start;
                  flex-wrap: wrap;
                  -webkit-flex-wrap: wrap;
                  align-content: flex-start;
            }

            .card {
                  width: 150px;
                  height: 100px;
                  border-radius: 10px;
                  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
                  text-align: center;
                  margin: 30px 20px;
                  border: 1px solid #ccc;
            }

            .card:hover {
                  border: 1px solid aqua;
            }

            img {
                  width: 100%;
                  height: 100%;
                  border-radius: 10px;
            }

            .desc {
                  font-size: 20px;
            }

            @media screen and (max-width:768px) {
                  .card {
                        width: 60px;
                        height: 50px;
                  }

                  .desc {
                        font-size: 15px;
                  }
            }
      </style>
</head>

<body>
      <div class="container">
            <div class="card">
                  <a target="_blank" href="https://learns.baidu.com/">
                        <img src="imgs/baidu.png" alt="百度新闻">
                  </a>
                  <div class="desc">百度新闻</div>
            </div>

      </div>
</body>
<script>
      var websites = {
            "sites": [
                  {
                        "name": "中国大学MOOC(慕课)",
                        "imgUrl": "imgs/icourse163.png",
                        "url": "https://www.icourse163.org/"
                  },
                  {
                        "name": "学堂在线",
                        "imgUrl": "imgs/xuetangx.png",
                        "url": "https://www.xuetangx.com/"
                  },
                  {
                        "name": "网易公开课",
                        "imgUrl": "imgs/163.png",
                        "url": "https://open.163.com/"
                  },
                  {
                        "name": "哔哩哔哩",
                        "imgUrl": "imgs/bilibili.png",
                        "url": "https://www.bilibili.com/"
                  },
                  {
                        "name": "中国科普博览",
                        "imgUrl": "imgs/kepu.png",
                        "url": "https://www.kepu.net.cn/"
                  },
                  {
                        "name": "国家中小学智慧教育平台",
                        "imgUrl": "imgs/smartedu.png",
                        "url": "https://basic.smartedu.cn/"
                  },
                  {
                        "name": "中国国家数字图书馆",
                        "imgUrl": "imgs/nlc.png",
                        "url": "https://www.nlc.cn/"
                  },
                  {
                        "name": "菜鸟教程",
                        "imgUrl": "imgs/runoob.png",
                        "url": "https://www.runoob.com/"
                  },
                  {
                        "name": "慕课网",
                        "imgUrl": "imgs/imooc.png",
                        "url": "https://www.imooc.com/"
                  },
                  {
                        "name": "实验楼",
                        "imgUrl": "imgs/shiyanlou.png",
                        "url": "https://www.shiyanlou.com/"
                  },
                  {
                        "name": "CSDN",
                        "imgUrl": "imgs/csdn.png",
                        "url": "https://www.csdn.net/"
                  },
                  {
                        "name": "掘金",
                        "imgUrl": "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web//static/favicons/favicon-32x32.png",
                        "url": "https://juejin.cn/"
                  },
                  {
                        "name": "知乎",
                        "imgUrl": "https://static.zhihu.com/heifetz/favicon.ico",
                        "url": "https://www.zhihu.com/"
                  },
                  {
                        "name": "中国教育在线",
                        "imgUrl": "https://www.eol.cn/favicon.ico",
                        "url": "https://www.eol.cn/"
                  },
                  {
                        "name": "多邻国",
                        "imgUrl": "https://d35aaqx5ub95lt.cloudfront.net/favicon.ico",
                        "url": "https://www.duolingo.com/"
                  },
                  {
                        "name": "可汗学院",
                        "imgUrl": "imgs/khanacademy.png",
                        "url": "https://zh.khanacademy.org/"
                  },
                  {
                        "name": "Coursera",
                        "imgUrl": "imgs/coursera.png",
                        "url": "https://www.coursera.org/"
                  },
                  {
                        "name": "edX",
                        "imgUrl": "https://www.edx.org/favicon.ico",
                        "url": "https://www.edx.org/"
                  },
                  {
                        "name": "Codecademy",
                        "imgUrl": "imgs/codecademy.png",
                        "url": "https://www.codecademy.com/"
                  },
                  {
                        "name": "freeCodeCamp",
                        "imgUrl": "https://www.freecodecamp.org/favicon-32x32.png",
                        "url": "https://www.freecodecamp.org/"
                  }
                  
            ]
      }
      $().ready(function () {
            $('.container').empty();
            var sites = websites['sites'];
            //为.container动态添加新闻卡片
            for (var i = 0; i < sites.length; i++) {
                  var sites_card = $('<div class="card">' +
                        '<a target="_blank" href="' + sites[i].url + '">' +
                        '<img src="' + sites[i].imgUrl + '">' +
                        '</a>' +
                        '<div class="desc">' + sites[i].name + '</div>' +
                        '</div>');
                  console.log(sites_card)
                  $('.container').append(sites_card);
            }

      });

      document.oncontextmenu = new Function("event.returnValue=false");
      document.onselectstart = new Function("event.returnValue=false");
      document.oncontextmenu = function (e) { return false; }
      document.onkeydown = function (e) {
            if (window.event && window.event.keyCode == 123) {
                  event.keyCode = 0;
                  event.returnValue = false;
                  return false;
            }
      }
</script>

</html>